<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-09-04 10:15:20
 * @LastEditors: voanit
 * @LastEditTime: 2022-09-04 22:35:53
-->
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";

// 使用ts的泛型指令props类型
const { money = 100, app = "小黄车" } = defineProps<{
  money?: number;
  app: string;
}>();

// const  emit=defineEmits(['handle'])
const emit = defineEmits<{
  (e: "handle", msg: string): void;
}>();

const btn = () => {
  emit("handle", "我是son组件");
};

const num = ref(10);
/* list:[{id:1,name:'jack'},{}] */
type Todo = {
  id: number;
  name: string;
  done: boolean;
};
const list = ref<number[]>([]);

const n = computed(() => {
  return "123";
});

const move = (e: MouseEvent, name: string): any => {
  console.log(e, name);
};

const refBox = ref(null);

onMounted(() => {
  // console.log(refBox.value?.src);
});
</script>
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===son===={{ app }}==={{ money }}==={{ n }}
    <button @click="btn">子向父传值</button>
    <img ref="refBox" />
    <h1 @mousemove="move($event, 'jack')">h1</h1>
  </div>
</template>
<style lang="less" scoped></style>
